<template>
  <div class="header-cont flex-box">
    <div class="header-left flex-box">
      <el-icon class="icon"
               size="20"
               @click="menuStore.collapsedMenu()"
      >
        <Fold/>
      </el-icon>
      <ul class="flex-box" style="padding-inline-start:0;height: 100%">
        <li v-for="(item,index) in tags"
            :key="item.path"
            class="tab flex-box"
            :class="{selected : item.path === route.path}"
        >
          <el-icon size="15"><component :is="item.icon"/></el-icon>
          <router-link  class="text flex-box " :to="item.path">
            {{item.name}}
          </router-link>

          <el-icon class="close" size="15" @click="closeTab(item,index)"><Close/></el-icon>
        </li>
      </ul>
    </div>
    <div class="header-right flex-box">
      <el-dropdown @command="handleClick">
        <div class ="el-dropdown-link flex-box">
          <el-avatar
              :src="userInfo.avatar"
          />
          <p class="user-name">{{userInfo.name}}</p>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>

          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

</template>

<script setup>
import {computed} from "vue"
import {ArrowDown,Close, Fold} from "@element-plus/icons-vue";
import {useMenuStore} from "../stores/menu.js";
import {useRoute,useRouter} from "vue-router";


const menuStore = useMenuStore();

//获取当前路由
const route = useRoute();
const router = useRouter();
//获取用户信息
const userInfo = JSON.parse(localStorage.getItem('pz_userInfo'));
//获取标签
const tags = computed(() => menuStore.selectMenu);

//关闭tab函数
const closeTab = (item,index) => {
  //从store里删除
  menuStore.removeMenu(item);
  //判断当前标签页是否是当前标签页
  if(item.path===route.path){
    //判断当前标签页是不是最后一个
    if(tags.value.length===0){
      //跳转到首页
      router.push('/')
    }else if(tags.value.length === index){
      //跳转到上一个标签页
      router.push({path:tags.value[index-1].path})

    } else{
      //跳转到下一个标签页
      router.push({path:tags.value[index].path})
    }

  }

}
//点击头像
const handleClick = (command) => {
  if(command === 'logout'){
    localStorage.removeItem("pz_token");
    localStorage.removeItem("pz_userInfo");
    localStorage.removeItem("Menu")
    //路由跳转
    window.location.href='/login';
  }
}

</script>

<style scoped lang="less">

.flex-box{
  display: flex;
  align-items: center;
  height: 100%;
}

.header-cont{
  padding: 0;
  height: 100%;
  justify-content: space-between;
  .header-left{
    height: 100%;
    .icon{
      width: 45px;
      height: 100%;

    }
    .icon:hover{
      background-color: #e9f7ff;
      cursor: pointer;
    }
    .tab{
      padding: 0 10px;
      height: 100vh;
      .text{
        height:100%;
        margin: 0 5px;
      }
      .close{
        visibility: hidden;
      }
      &.selected{
        background-color: #f5f5f5;
        a,i{
          color:#409eff;
        }
      }
    }
    .tab:hover{
      background-color: #f5f5f5;
      .close{
        visibility: visible;
        cursor: pointer;
        color:#000;
      }
    }

  }
  .header-right{
    .user-name{
      margin: auto 5px;
    }
    .user-name:hover{
      color: #a8e9fd;
      cursor: pointer;
    }

  }
  a{
    text-decoration: none;
    color:#000;
    font-size: 15px;
  }

}
.header {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  height: 45px;
}


</style>
